<template>
	<div id="backPwd" :style="'background-image: url(' + bgUrl + ')'">
		<div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台</div>
		<!--实线-->
		<div class="solid"></div>
		<div class="main">
			<h3 style="padding: 20px;">找回密码</h3>

			<el-form :label-position="labelPosition" label-width="80px" :model="form" class="form">
				<el-form-item label="用户名">
					<el-input v-model="form.username" placeholder="请输入您的用户名"></el-input>
					<el-button type='primary' style="margin-left: 20px;" @click="getCheckCode" :loading="loading" v-text="text"></el-button>
				</el-form-item>
				<el-form-item label="验证码">
					<el-input v-model="form.checkCode" placeholder="请输入验证码"></el-input>
				</el-form-item>
				<el-form-item label="新密码">
					<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input v-model="form.password2" type="password" placeholder="请再次输入密码"></el-input>
				</el-form-item>
				<div>
					<el-button type='primary' @click="checkStatus">确定</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import md5 from 'md5'
  import bgUrl from '../../../static/img/login.jpg'
	export default {
		data () {
			return {
				labelPosition: 'right',
				form: {
					username: '',
					checkCode: '',
					password: '',
					password2: ''
				},
				loading: false,
				text: '获取验证码',
        bgUrl:bgUrl

			}
		},
		created() {

		},
		methods: {
			getCheckCode() {
				if(this.form.username == '') {
					this.$message({
						type: "info",
						message: "请输入用户名"
					});
				} else {
					this.loading = true;
					this.text = '5秒后可重新获取';

					let params = {
						userName: this.form.username
					};
					this.$api.sendForgetEmail(params).then(res => {
						if(res.code == '000000') {
							console.log(res.data);
							this.$message({
								type: "success",
								message: "验证码已发送"
							})
							setTimeout(() => {
								this.loading = false;
								this.text = '获取验证码';
							}, 5000)
						}else{
              setTimeout(() => {
                this.loading = false;
                this.text = '获取验证码';
              }, 5000)
            }
					})
				}
			},
			checkStatus() {
				//				var pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
				if(this.form.checkCode == '') {
					this.$message({
						type: "info",
						message: "请输入验证码！"
					})
				} else if(this.form.password == '' || this.form.password2 == '') {
					this.$message({
						type: "info",
						message: "请输入密码！"
					})
				} else if(this.form.password != this.form.password2) {

					this.$message({
						type: "info",
						message: "您两次输入的密码不一致！"
					})
				} else {
					let params = {
						userName: this.form.username,
						passWord: md5(this.form.password),
						code: this.form.checkCode
					}
					this.$api.checkCodeNoPwd(params).then(res => {
						if(res.code == '000000') {
							console.log(res.data);
							this.$message({
								type: "success",
								message: "密码找回成功"
							});
							this.$router.push('/login')
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
	#backPwd {
    height:100%;
		padding: 20px;
    color: white!important;
		.icon-icon1 {
			font-size: 35px!important;
			margin-right: 35px;
			position: absolute;
			color: #008000;
			right: 100px;
			bottom: -8px;
		}
		.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.icon-icon1 {
			font-size: 25px;
		}
		.solid {
			background-color: black;
			height: 2px;
		}
		.el-form-item__content {
			display: flex;
		}
		.main {

			.form {
				width: 40%;
        margin: auto;
			}
		}
	}
</style>
